<template>
  <div>
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="A-level Promoter" name="A-level Promoter">
        <div>
          <r-search
            ref="search"
            :searchData="searchData"
            :searchForm="searchForm"
            :searchHandle="searchHandle"
          />
          <r-table
            :tableHandles="tableHandles"
            :tableData="tableData"
            :tableCols="tableCols"
            :tablePage="pagination"
            @refresh="page()"
            :isSelection="false"
            :isPagination="true"
            :loading="tableLoading"
            :isHandle="true"
          />

          <r-form
            labelWidth="150px"
            :isHandle="true"
            :formRules="formRules"
            :formCols="formCols"
            :formHandle="formHandle"
            :formData="formData"
            ref="elForm"
            :inline="false"
            dialogWidth="650px"
          >
          </r-form>
          <!-- 修改推广员Phone -->
          <el-dialog
            title="Amend Promoter Phone"
            :visible.sync="renewalShow"
            width="27%"
          >
            <el-form
              :model="renewalData"
              :status-icon="true"
              :rules="renewalRules"
              ref="renewalData"
              label-width="130px"
              class="renewalData"
            >
              <el-form-item label="Promoter" prop="id">
                <el-input :disabled="true" v-model="renewalData.id" />
              </el-form-item>
              <el-form-item label="Phone" prop="phone">
                <el-input v-model="renewalData.phone" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="renewalShow = false">Cancel</el-button>
              <el-button type="primary" @click="renewalSubmit('renewalData')"
                >Confirm</el-button
              >
            </div>
          </el-dialog>
          <!-- 活动Details -->
          <el-dialog
            title="Promoter Detailed Promotion Record"
            :visible.sync="particularsShow"
          >
            <el-table :data="particularsData" style="width: 100%">
              <!-- <el-table-column align="center" prop="operatorName" label="OperatorName" /> -->
              <el-table-column align="center" prop="phone" label="Phone" />
              <el-table-column
                align="center"
                prop="trueName"
                label="User Name"
              />
              <el-table-column
                align="center"
                prop="isConsume"
                label="User Status"
              >
                <template slot-scope="scope">{{
                  scope.row.status == 1 ? "Activated" : "Nonactivated"
                }}</template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="consumeTime"
                label="Consumption Time"
              />
              <el-table-column
                align="center"
                prop="ctime"
                label="Creation Time"
              />
            </el-table>
          </el-dialog>
        </div>
      </el-tab-pane>
      <el-tab-pane
        label="B-level Promoter"
        name="B-level Promoter"
        v-if="isActiveName"
      >
        <div>
          <r-table
            :tableHandles="tableHandles3"
            :tableData="tableData3"
            :tableCols="tableCols3"
            :tablePage="pagination3"
            :isSelection="false"
            :isPagination="true"
            :loading="tableLoading"
            :isHandle="true"
            @refresh="pages()"
          />
          <!-- <r-form labelWidth="150px" :isHandle="true" :formRules="operateRules" :formCols="operateForm"
                        :formHandle="operateHandle" :formData="operateData" ref="elForm3" :inline="false"
                        dialogWidth="650px">
                    </r-form> -->
          <el-dialog
            title="B-level Promoter Install"
            :visible.sync="isPromoter"
            width="38%"
          >
            <el-form
              :model="operateData"
              :status-icon="true"
              :rules="operateRules"
              ref="operateData"
              label-width="220px"
              class="renewalData"
            >
              <el-form-item label="Number of Promotion rules" prop="ruleNumber">
                <el-input v-model="operateData.ruleNumber" />
              </el-form-item>
              <el-form-item
                label="Money per number of people who meet the rules($)"
                prop="amount"
              >
                <el-input v-model="operateData.amount" />
              </el-form-item>
              <el-form-item label="Enable?" prop="enable">
                <el-switch v-model="operateData.enable"></el-switch>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="isPromoter = false">Cancel</el-button>
              <el-button type="primary" @click="PromoterFn('operateData')"
                >Confirm</el-button
              >
            </div>
          </el-dialog>
          <!-- 活动Details -->
          <el-dialog
            title="The promoter details the promotion record"
            :visible.sync="particularsShow1"
          >
            <el-table :data="particularsData1" style="width: 100%">
              <!-- <el-table-column align="center" prop="operatorName" label="OperatorName" /> -->
              <el-table-column align="center" prop="phone" label="Phone" />
              <el-table-column align="center" prop="trueName" label="User Name">
                <template slot-scope="scope">{{
                  scope.row.trueName ? scope.row.trueName : "--"
                }}</template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="isConsume"
                label="User Status"
              >
                <template slot-scope="scope">{{
                  scope.row.status == 1 ? "Activated" : "Nonactivated"
                }}</template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="consumeTime"
                label="Consumption Time"
              >
                <template slot-scope="scope">{{
                  scope.row.consumeTime ? scope.row.consumeTime : "--"
                }}</template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="ctime"
                label="Creation Time"
              />
            </el-table>
          </el-dialog>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- ImportDetails按钮的Template -->
    <Abnormal_record ref="Abnormal_record"></Abnormal_record>
  </div>
</template>

<script>
import Abnormal_record from "./cus/Abnormal_record";
export default {
  components: {
    Abnormal_record
  },
  data() {
    var checkToFixedTwo = (rule, value, callback) => {
      const reg = /[^\d]/g;
      if (!reg.test(value)) {
        callback();
      } else {
        return callback(new Error("Please Input Integer Number"));
      }
    };
    return {
      activeName: "A-level Promoter",
      isActiveName: false,

      // B-level Promoter
      isPromoter: false,
      tableHandles3: [
        {
          label: "B-level Promoter Install",
          type: "primary",
          plain: true,
          handle: async e => {
            this.promotionSettingGet();
            this.isPromoter = true;
          }
        }
      ],
      tableData3: [],
      tableCols3: [
        { label: "User Name", prop: "userName" },
        { label: "QR Code", type: "image", prop: "qrCode" },
        // { label: "推广员id", prop: "id" },
        // { label: "Operator", prop: "operatorName" },
        { label: "Phone", prop: "phone" },
        {
          label: "Divide Into Money",
          prop: "amount",
          formatter: e => "$" + e.amount
        },
        {
          label: "Number Of Promoters",
          prop: "count",
          formatter: e => e.count
        },
        {
          label: "Share Limit",
          prop: "ruleNumber",
          formatter: e =>
            "Pull" + e.ruleNumber + "People,Divide Into" + "$" + e.amount
        },
        { label: "Creation Time", prop: "ctime" },
        // {
        //   label: "UserStatus",
        //   prop: "status",
        //   type: "tag",
        //   formatter: e =>
        //     e.status == 1 ? "Enable" : e.status == 2 ? "Forbidden" : "--",
        //   theme: e => (e.status == 2 ? "warning" : "primary")
        // }
        // {
        //     label: "Operations",
        //     type: "button",
        //     width: 180,
        //     btnList: [
        //         {
        //             label: "Details",
        //             type: "text",
        //             handle: async (row) => {}
        //         },

        //     ]
        // },
        {
          label: "Operations",
          type: "button",
          width: 110,
          btnList: [
            {
              label: "Details",
              type: "text",
              handle: async row => {
                // this.particularsShow1 = true;
                // let page = {
                //   pageSize: this.pagination.limit,
                //   pageNum: this.pagination.offset,
                //   promotionId: row.id
                // };
                // let res = await this.apis.promotionPromotionRecord(page);
                // this.particularsData1 = res.rows || [];
                this.$refs.Abnormal_record.show_fun(row);
              }
            }
          ]
        }
      ],

      operateData: {
        ruleNumber: null, //规则人数  2
        amount: null, //每达到规则人数的分成Money  10
        enable: false //是否Enable 1 Enabletrue  2 关闭false
      },
      operateForm: [
        {
          type: "input",
          types: "number",
          label: "Number Of Promotion Rules($)",
          placeholder: "",
          prop: "ruleNumber",
          width: 400
        },
        {
          type: "input",
          types: "number",
          label: "Money Per Number Of People Who Meet The Rules($)",
          placeholder: "",
          prop: "amount",
          width: 400
        },
        {
          type: "radio",
          label: "Enable?",
          placeholder: "",
          prop: "enable",
          width: 400,
          radios: [
            { value: 1, label: "Enable" },
            { value: 2, label: "Close" }
          ],
          change: e => {
            this.operateData.enable = e;
          }
        }
      ],
      operateHandle: [
        {
          label: "Cancel",
          icon: "el-icon-circle-close",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "primary",
          icon: "el-icon-circle-plus-outline",
          handle: e => this.elFormSubmit()
        }
      ],
      operateRules: {
        ruleNumber: [
          { required: true, message: "Please Enter", trigger: "blur" },
          { validator: checkToFixedTwo, trigger: "blur" }
        ],
        amount: [{ required: true, message: "Please Enter", trigger: "blur" }]
      },
      pagination3: { limit: 10, offset: 1, total: 0 },
      // A-level Promoter
      pagination: { limit: 10, offset: 1, total: 0 },
      particularsData: [], //活动Details
      particularsData1: [], //活动Details
      particularsShow: false,
      particularsShow1: false,
      // 修改推广员Phone start
      renewalShow: false,
      renewalData: {
        id: "",
        phone: ""
      },
      renewalRules: {
        id: [{ required: true, message: "Please Enter", trigger: "blur" }],
        phone: [{ required: true, message: "Please Enter", trigger: "blur" }]
      },
      // 修改推广员Phone end
      searchData: {
        phone: "",
        userName: "",
        status: ""
      },
      searchForm: [
        { type: "input", placeholder: "Phone", prop: "phone", width: 180 },
        {
          type: "input",
          placeholder: "User Name",
          prop: "userName",
          width: 220
        }
        // {
        //   type: "select",
        //   placeholder: "UserStatus",
        //   prop: "status",
        //   width: 180,
        //   options: [
        //     { label: "Enable", value: 1 },
        //     { label: "Forbidden", value: 2 }
        //   ]
        // }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "primary",
          plain: true,
          handle: async e => {
            this.zeroFn();
            let page = {
              pageNum: this.pagination.offset,
              pageSize: this.pagination.limit,
              phone: this.searchData.phone,
              userName: this.searchData.userName,
              status: this.searchData.status
            };
            let res = await this.apis.promotionList(page);
            this.tableData = res.rows || [];
            this.pagination.total = res.total;
            this.searchData.phone = "";
            this.searchData.userName = "";
            this.searchData.status = "";
          }
        },
        {
          label: "Reset",
          buttonss: true,
          icon: "el-icon-refresh-right",
          handle: e => {
            this.searchData = {
              phone: "",
              userName: "",
              status: ""
            };
            this.getData();
          }
        }
      ],
      tableLoading: false,
      tableHandles: [
        {
          label: "Add Extension Officer",
          type: "primary",
          plain: true,
          handle: async e => {
            this.elFormVisible();
          },
          disabled: sessionStorage.role == "operator" ? false : true
        }
      ],
      tableData: [],
      tableCols: [
        { label: "User Name", prop: "userName" },
        { label: "QR Code", type: "image", prop: "qrCode" },
        // { label: "推广员id", prop: "id" },
        // { label: "Operator", prop: "operatorName" },

        { label: "Phone", prop: "phone" },
        {
          label: "Divide Into Money",
          prop: "amount",
          formatter: e => "$" + e.amount
        },
        {
          label: "Number of promoters",
          prop: "count",
          formatter: e => e.count
        },
        {
          label: "Share limit",
          prop: "ruleNumber",
          formatter: e =>
            "Pull" + e.ruleNumber + "people,Divide Into$" + e.amount
        },
        { label: "Creation Time", prop: "ctime" },
        // {
        //   label: "UserStatus",
        //   prop: "status",
        //   type: "tag",
        //   formatter: e =>
        //     e.status == 1 ? "Enable" : e.status == 2 ? "Forbidden" : "--",
        //   theme: e => (e.status == 2 ? "warning" : "primary")
        // },
        {
          label: "Operations",
          type: "button",
          width: 180,
          btnList: [
            {
              label: "Details",
              type: "text",
              handle: async row => {
                // this.particularsShow = true;
                // let page = {

                //   promotionId: row.id
                // };
                // let res = await this.apis.promotionPromotionRecord(page);
                // this.particularsData = res.rows || [];
                this.$refs.Abnormal_record.show_fun(row);
              }
            },
            {
              label: "Amend Phone",
              type: "text",
              handle: row => {
                this.renewalShow = true;
                this.renewalData.id = row.id;
                this.renewalData.phone = "";
              }
            },
            {
              label: "Forbidden",
              type: "text",

              handle: async row => {
                let res = await this.apis.promotionUpdate({
                  id: row.id,
                  status: 2
                });
                this.$message({
                  type: res.code == 200 ? "success" : "error",
                  message: res.msg
                });
                this.getData();
              },
              isShow: row => {
                return row.status == 1 ? true : false;
              }
            },
            {
              label: "Enable",
              type: "text",
              handle: async row => {
                let res = await this.apis.promotionUpdate({
                  id: row.id,
                  status: 1
                });
                this.$message({
                  type: res.code == 200 ? "success" : "error",
                  message: res.msg
                });
                this.getData();
              },
              isShow: row => {
                return row.status == 2 ? true : false;
              }
            },
            {
              label: "Delete",
              type: "text",
              handle: row => {
                this.$confirm(
                  "This action permanently removes the promoter, whether to continue or not?",
                  "Hint",
                  {
                    confirmButtonText: "Confirm",
                    cancelButtonText: "Cancel",
                    type: "warning"
                  }
                )
                  .then(async () => {
                    let res = await this.apis.promotionDel(row.id);
                    this.$message({
                      type: res.code == 200 ? "success" : "error",
                      message: res.msg
                    });
                    this.getData();
                  })
                  .catch(() => {
                    this.$message({
                      type: "info",
                      message: "Canceled Delete"
                    });
                  });
              }
            }
          ]
        }
      ],

      formData: {
        userName: "",
        phone: "",
        amount: "",
        ruleNumber: ""
      },

      formCols: [
        {
          type: "input",
          label: "User Name",
          width: 350,
          prop: "userName",
          placeholder: "Please Enter"
        },
        {
          type: "input",
          label: "Phone",
          width: 350,
          prop: "phone",
          placeholder: "Please Enter"
        },
        {
          type: "number",
          label: "Divide Into Money",
          width: 350,
          prop: "amount",
          placeholder: "Please InputMoney"
          // remark: "元"
        },
        {
          type: "number",
          label: "Share Limit",
          width: 150,
          prop: "ruleNumber",
          placeholder: "Please Input Number People",
          remark:
            "Example: Each PROMOTION (share limit) person can receive (share Money)"
        }
      ],
      formRules: {
        userName: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        phone: [{ required: true, message: "Please Enter", trigger: "blur" }],
        amount: [
          { required: true, message: "Please Enter", trigger: "blur" },
          { validator: checkToFixedTwo, trigger: "blur" }
        ],
        ruleNumber: [
          { required: true, message: "Please Enter", trigger: "blur" },
          { validator: checkToFixedTwo, trigger: "blur" }
        ]
      },
      formHandle: [
        {
          label: "Cancel",
          icon: "el-icon-circle-close",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "primary",
          icon: "el-icon-circle-plus-outline",
          handle: e => this.elFormSubmit()
        }
      ]
    };
  },
  async mounted() {
    this.isActiveName = sessionStorage.role == "operator" ? true : false;
    this.getData();
    this.getData3();
  },
  methods: {
    handleClick(tab, event) {
      this.activeName = tab.label;
    },
    // B-level Promoter

    // 获取B-level PromoterSetup
    async promotionSettingGet() {
      let res = await this.apis.promotionSettingGet();
      this.operateData.amount = res.data.amount;
      this.operateData.ruleNumber = res.data.ruleNumber;
      this.operateData.enable = res.data.enable === 1 ? true : false;
    },
    pages() {
      this.getData3();
    },
    async getData3() {
      let res = await this.apis.promotionList({
        pageNum: this.pagination3.offset,
        pageSize: this.pagination3.limit,
        type: 2
      });
      this.tableData3 = res.rows || [];
      this.pagination3.total = res.total;
    },
    async PromoterFn(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          this.operateData.enable = this.operateData.enable ? 1 : 2;
          this.operateData.amount = Number(this.operateData.amount);
          let res = await this.apis.promotionSettingEdit(this.operateData);
          console.log(444, this.operateData, res);
          this.$message({
            message: res.msg,
            type: res.code == 200 ? "success" : "error"
          });
          this.getData3();
          this.isPromoter = false;
        } else {
          this.$message({
            message: "error",
            type: "error"
          });
          return false;
        }
      });
    },

    // A-level Promoter
    zeroFn() {
      this.pagination.limit = 10;
      this.pagination.offset = 1;
      this.pagination.total = 0;
    },
    // 修改推广员Phone
    async renewalSubmit(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let page = {};
          let res = await this.apis.promotionUpdate(this.renewalData);
          console.log(444, this.renewalData, res);
          this.$message({
            message: res.msg,
            type: res.code == 200 ? "success" : "error"
          });
          this.renewalShow = false;
          this.getData();
        } else {
          this.$message({
            message:
              "Please fill in the necessary information before making changes",
            type: "error"
          });
          return false;
        }
      });
    },
    async getData() {
      let res = await this.apis.promotionList({
        pageNum: this.pagination.offset,
        pageSize: this.pagination.limit,
        type: 1
      });
      this.tableData = res.rows || [];
      this.pagination.total = res.total;
    },
    page() {
      this.getData();
    },
    elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          let res = await this.apis.promotionSave(this.formData);
          this.$message({
            type: res.code == 200 ? "success" : "error",
            message: res.msg
          });
          this.elFormVisible();
          this.getData();
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.agentIdClass {
  margin-bottom: 20px;
}

.agentIdClass > .el-select {
  margin-left: 8%;
}

.agentIdClass1 > .el-select {
  margin-left: 11%;
}

.w54MB20 {
  width: 76%;
  margin-bottom: 10px;
}

.fJ {
  float: auto;
}

/* /deep/ .el-tabs__item:hover {
    color: #6bdb85 !important;
    cursor: pointer;
    border: 1px solid #6bdb85;
  }

  /deep/ .el-tabs__item.is-active {
    color: #6bdb85 !important;
  } */
</style>
